<template>
  <public-dialog
    :title="popupTitle"
    confirm-button-title="确认"
    width="40%"
    v-model:visible="visible"
    :confirmDisabled="isLoading"
    @on-confirm="onConfirm"
  >
    <template #default>
        <el-main
            v-loading="isLoading"
            element-loading-text="数据提交中……"
        >
            <el-form
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    label-width="100"
            >
                <el-form-item label="菜单类型" prop="sourceType">
                    <el-select v-model="form.sourceType" clearable>
                        <el-option :value="1" label="菜单"></el-option>
                        <el-option :value="2" label="目录"></el-option>
                        <el-option :value="3" label="按钮"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="({1:'菜单',2:'目录',3:'按钮'}[form.sourceType] || '') +'名称'" prop="name">
                    <el-input v-model="form.name" :placeholder="'请输入'+ ({1:'菜单',2:'目录',3:'按钮'}[form.sourceType] || '') +'名称'" clearable></el-input>
                </el-form-item>
                <el-form-item label="前端路径" prop="path">
                    <el-input v-model="form.path" placeholder="请输入前端路径" clearable></el-input>
                </el-form-item>
                <el-form-item label="路由" prop="route" v-if="form.sourceType===1">
                    <el-input v-model="form.route" placeholder="请输入路由" clearable></el-input>
                </el-form-item>
                <el-form-item label="图标" v-if="form.sourceType===2">
                    <el-select v-model="form.icon" clearable>
                        <el-option v-for="(item,index) in iconImgObj" :key="index" :value="item.name">
                            <img class="icon" :src="item.value" alt="">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否可见" v-if="form.sourceType!==3">
                    <el-switch v-model="form.hidden" :active-value="1" :inactive-value="-1"></el-switch>
                </el-form-item>
                <el-form-item label="是否全屏" v-if="form.sourceType!==3">
                    <el-switch v-model="form.fullScreen" :active-value="1" :inactive-value="-1"></el-switch>
                </el-form-item>
                <el-form-item label="父级">
                    <el-cascader v-model="form.parentId" :options="menusList" :props="props" clearable />
                </el-form-item>
            </el-form>
        </el-main>
    </template>
  </public-dialog>
</template>

<script setup>
import systemApi from "@/views/systemSetting/systemSetting"
import PublicDialog from "@/components/PublicDialog.vue";
import {nextTick, reactive, ref} from "vue";
import {ElForm, ElFormItem, ElCascader, ElSwitch, ElMessage,ElMain} from "element-plus";
import {iconImgObj} from "@/common/dict/dictCollect";

const popupTitle = ref('');

const isLoading = ref(false);

const form = reactive({
    name:'', // 名称
    path:'', // 前端路径
    route:'', // 路由
    icon:'', // 图标
    hidden:1, // 是否可见
    fullScreen:-1, // 是否全屏
    parentId:'', // 父级id
    type:1, // 资源类型
    sourceType:'' // 菜单类型
});

const rules = reactive({
    name: [
        { required: true, message: '名称不能为空!', trigger: 'blur' }
    ],
    path: [
        { required: true, message: '前端路径不能为空!', trigger: 'blur' }
    ],
    route: [
        { required: true, message: '路由不能为空!', trigger: 'blur' }
    ],
    sourceType: [
        { required: true, message: '菜单类型不能为空!', trigger: 'change' }
    ],
});

const props = {
    checkStrictly: true,
    value:'permissionId',
    label:'name'
}



/**
 * 获取所有权限及与角色的绑定关系
 */
const menusList = ref([]);
const getPermissionAndRolePermission = () => {
    systemApi.role.getPermissionAndRolePermission('').then(res=>{
        if(res.code === '200'){
            menusList.value = res.data.menus;
        }
    });
}

/**
 * 确认
 */
const formRef = ref(null);
const emits = defineEmits(['onSuccess']);
const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            isLoading.value = true;
            let param = {
                ...form
            }
            if(Array.isArray(form.parentId) && form.parentId.length!==0){
                param.parentId =  form.parentId[form.parentId.length-1];
            }
            let type = {'新增菜单权限':'addPermission','编辑菜单权限':'editPermission'}[popupTitle.value]
            systemApi.role[type](param).then(res=>{
                if(res.code==='200'){
                    isLoading.value = false;
                    visible.value = false;
                    emits('onSuccess');
                    ElMessage.success(`${popupTitle.value}成功!`);
                }else{
                    isLoading.value = false;
                    visible.value = false;
                    ElMessage.error(`${popupTitle.value}失败!`);
                }
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**
 * 重置表单
 */
const resetForm = () => {
    form.name = '';
    form.path = '';
    form.route = '';
    form.icon = '';
    form.hidden = 1;
    form.fullScreen = -1;
    form.parentId = '';
    form.type = 1;
    form.sourceType = '';
}

/**
 * 打开
 */
const visible = ref(false);
const open = (row,title) => {
    popupTitle.value = title;
    visible.value = true;
    let data = JSON.parse(JSON.stringify(row))
    if(row){
        for (let key in data){
            if(key==='parentId' && data[key]!==''){
                form['parentId'] = [data['parentId']];
            }else{
                form[key] = data[key];
            }
        }
    }else{
        resetForm();
        setTimeout(()=>{
            formRef.value.clearValidate();
        },100);
    }
    getPermissionAndRolePermission();
}

/**
 * 关闭弹窗
 */
const close = () => {
    visible.value = false;
}

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>
.icon{
  width: 28px;
  height: 28px;
}
</style>